<!-- 详细统计 -->
<template>
    <div class="statistic"  ref="list-main" @scroll="scrollLoad()">
        <div class="stc-body">
            <div class="stc-top clearfix">
                <div class="module-title left">班级详细统计</div>
                <div class="btn-class right" @click="classMaskShow=true">{{thisClass.name}}</div>
            </div>
            <ul class="stc-list">
                <li class="list-li shadow3 clearfix" v-for="(item,index) in stcList" :key="index">
                    <div class="li-name">{{item.book.bookName}}</div>
                    <div :class="['label',{'istask':item.checkInTask.taskCategory!=2},{'istest':item.checkInTask.taskCategory==2}]">{{item.checkInTask.taskCategory==2 ? '考试' : '打卡'}}任务</div>
                    <div class="li-date">{{item.createTime}}创建</div>
                    <div class="data-list">
                        <div class="data-item">
                            <em>{{item.checkInTask.dayCount}}</em>
                            <span>任务天数</span>
                        </div>
                        <div class="data-item">
                            <em>{{item.successCount}}</em>
                            <span>挑战成功</span>
                        </div>
                        <div class="data-item">
                            <em>{{item.failCount}}</em>
                            <span>挑战失败</span>
                        </div>
                        <div class="data-item">
                            <em>{{item.experienceCount}}</em>
                            <span>阅读心得</span>
                        </div>
                    </div>
                    <div class="li-bottom" v-show="item.checkInTask.taskCategory!=2">
                        打卡人数：{{item.userCount}}人&nbsp;&nbsp;&nbsp;&nbsp;
                        平均阅读时长{{Math.floor(item.avgMinute%3600/60)}}分钟
                    </div>
                </li>
            </ul>
            <!-- 加载提示 -->
            <div class="bottom-tips">{{bottomTip}}</div> 
            <!-- 空状态 -->
            <transition name='fade'>
                <div class="no-con" v-show="noConShow">
                    <img src="@/assets/img/no-con.png" alt="">
                    <p>暂无统计数据...</p>
                </div>
            </transition>  
        </div>
        <!-- 按钮 -->
        <div class="btn-box-main">
            <router-link :to="{path:'/export'}">
                <div class="btn-blue shadow2">导 出</div>
            </router-link>
        </div>
        <!-- 选班级 -->
        <transition name='fade'>
            <div class="mask" v-show="classMaskShow">
                <div class="mask-close" @click="classClose()"></div>
                <transition name='slideup'>
                    <div class="class-box" v-show="classMaskShow">
                        <div class="grade-close" @click="classClose()"></div>
                        <ul>
                            <li :class="['left',{'ischose':classChose==index}]" v-for="(item,index) in classList" :key="index">
                                <span  @click="classChoseFun(item,index)">{{item.name}}</span>
                            </li>
                        </ul>
                    </div>
                </transition>
            </div>
        </transition>
    </div>
</template>

<script>
import { axGet } from '@/api/index'
import { getTimeStr } from '@/assets/js/base'

export default {
    name: "statistic",
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            stcList:[],
            // 选班
            classList:this.$parent.myInfo.classJson?this.$parent.myInfo.classJson:[],
            thisClass:{},
            classChose:0,
            classMaskShow:false,

            // 分页
            noConShow:false,
            listPage:1,
            totalPage:1,
            bottomTip:'到达世界的边缘咯...',
            isLoading:true,
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=false;
    },
    mounted(){
        
        
        /****** 验证登录 *****/ 
		if(!sessionStorage.getItem("myInfo")){
			this.$router.replace({path:'/',query: {}});
		}else{
            if(sessionStorage.getItem("thisClass")){
                this.classChose=parseInt(sessionStorage.getItem("classChose"))
                this.thisClass=JSON.parse(sessionStorage.getItem("thisClass"))
            }else{
                this.thisClass=this.classList[0]
            }
            this.getList(1)
        }
    },
    methods:{
        //请求
        getList(page){
            axGet('GetHistoryTask', {
                classcode:this.thisClass.code,
                userid:this.userid,
                pageIndex: page,
                pageSize:10,
            }).then(res => {
                if(res.ResultCode===1){
                    let listJson=res.Value.list ? res.Value.list:[]
                    listJson.forEach(item => {
                        let year=item.checkInTask.createTime.slice(0,4);
                        let month=item.checkInTask.createTime.slice(5,7);
                        let date=item.checkInTask.createTime.slice(8,10);
                        let time=year+'年'+month+'月'+date+'日';
                        this.$set(item,'createTime', time)
                        this.stcList.push(item)
                    });
                    if(page==1){
                        this.totalPage=res.Value.pageCount
                        this.stcList.length==0 ? this.noConShow=true : this.noConShow=false
                    }
                    if(page<this.totalPage){
                        this.bottomTip='上拉加载更多'
                    }else{
                        this.bottomTip=''
                    }
                    this.isLoading=true;
                }else{
                    this.isLoading=false; 
                }
            })
        },
        // 班级选择
        classChoseFun(item,index){
            if(this.classChose!=index){
                this.classChose=index
                this.thisClass=item
                sessionStorage.setItem("classChose",index)
                sessionStorage.setItem("thisClass",JSON.stringify(item))
                
                this.noConShow=false
                this.listPage=1
                this.totalPage=1
                this.bottomTip='到达世界的边缘咯...'
                this.isLoading=true
                this.getList(1)
                this.classMaskShow=false;
            }
        },
        classClose(){
            this.classMaskShow=false;
        },
        // 滚动加载   
        scrollLoad(){
            // let bodyH = document.documentElement.clientHeight || document.body.clientHeight;
            let bodyH = this.$refs['list-main'].clientHeight;
            let scrollH = this.$refs['list-main'].scrollTop;
            let listH=this.$refs['list-main'].scrollHeight;
            // console.log(bodyH,scrollH,listH)
            if(scrollH+bodyH+100>listH && this.isLoading){
                this.isLoading=false
                this.bottomTip='努力加载中...'
                // console.log(this.totalPage)
                this.listPage=this.listPage+1;
                if(this.listPage<this.totalPage || this.listPage == this.totalPage){
                    let page=this.listPage;
                    this.getList(page)
                }else{
                    if(this.stcList.length>0){
                        this.bottomTip='到达世界的边缘咯...'
                        console.log('没有更多数据')
                    }else{
                        this.bottomTip=''; 
                    }
                    
                }
                
            }
            
        },
    }
}
</script>
<style type="text/css" scoped>
.statistic{
    height: 100%;
    width: 100%;
    overflow: scroll;
    
}
.stc-body{
    padding: 0 0.32rem 1.6rem;
    
    box-sizing: border-box; 
}
.stc-top{
    padding: 0.36rem 0 0.38rem;
}
.module-title{
    line-height: 0.64rem;
}
.btn-class{
    line-height: 0.36rem;
    padding-right: 0.4rem;
    color: #02affe;
    font-size: 0.3rem;
    font-weight: bold;
    background: #e5f7ff url(~@/assets/img/icon/change-blue.png) no-repeat right 0.4rem center;
    background-size: 0.28rem 0.28rem;
    padding: 0.16rem 0.76rem 0.16rem 0.36rem;
    border-radius: 0.34rem;
    
}
.list-li{
    padding: 0.46rem 0 0.36rem;
    border-radius: 0.3rem;
    position: relative;
    margin-bottom: 0.3rem;
}
.label{
    position: absolute;
    top: 0.44rem;
    right: 0;
    width: 1.6rem;
    height: 0.48rem;
    line-height: 0.48rem;
    box-sizing: border-box;
    padding-left: 0.28rem;
    font-size: 0.26rem;
    border-radius: 0.24rem 0 0 0.24rem;
}
.istask{
    background: #fff8e5;
    color: #ffb600;
}
.istest{
    background: #fff1e5;
    color: #ff7100;
}
.li-name{
    font-size: 0.4rem;
    color: #000;
    font-weight: bold;
    padding: 0 0.48rem 0.18rem;
}
.li-date{
    padding-left: 0.48rem;
    color: #999;
}
.li-bottom{
    border-top: 1px solid #eee;
    padding: 0.34rem 0.48rem 0;
    font-size: 0.28rem;
    color: #666;
    margin-top: 0.16rem;
}
.data-list{
    display:-webkit-box;  
    display:-webkit-flex; 
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0.36rem 0.18rem 0.16rem;
}
.data-item{
    width: 33.3%;
    text-align: center;
}
.data-item em{
    display: block;
    font-size: 0.36rem;
    font-weight: bold;
    height: 0.6rem;
    line-height: 0.6rem;
    color: #02affe;
}
.data-item span{
    display: block;
    color: #666;
    border-right:1px solid #e0e0e0;
}
.data-item:last-child span{
    border: 0;
}
</style>